<template>
  <div id="scenic-spot-display" v-loading="loading" class="animate__animated">
    <div v-if="scenic">
      <el-card style="width: 100%" shadow="always">
        <template #header>
          <el-row align="middle" style="display: flex">
            <!-- 景点名 -->
            <span style="font-size: 16px; font-weight: bold; margin-right: 12px">
              {{ scenic.scenicName }}
            </span>

            <!-- 热度 -->
            <span style="color: gray; font-size: 14px; margin-right: 16px">
              <el-icon style="vertical-align: middle; margin-right: 4px"><StarFilled /></el-icon>
              {{ scenic.popularity }}
            </span>

            <!-- 查看详情按钮 -->
            <span style="color: #409eff; cursor: pointer; font-size: 14px; margin-right: 16px">
              <router-link
                :to="{
                  name: 'showScenic',
                  params: {
                    scenicId: scenic.scenicId,
                  },
                }"
                >查看详情</router-link
              >
              <el-icon style="vertical-align: middle"><ArrowRight /></el-icon>
            </span>

            <!-- 关闭按钮推到最右 -->
            <el-icon @click="close" class="close" style="margin-left: auto; cursor: pointer">
              <CloseBold />
            </el-icon>
          </el-row>
        </template>

        <div class="content">
          <!-- 轮播图 -->
          <el-carousel height="200px" style="margin-bottom: 15px">
            <el-carousel-item v-for="(pic, index) in scenic.scenicPics" :key="index">
              <img
                :src="
                  pic ||
                  'https://cdn.jsdelivr.net/gh/xiaoliao111/sta-images@main/scenery/30c7cb19-7771-4e1e-9599-444510e2499e.jpg'
                "
                style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px"
              />
            </el-carousel-item>
          </el-carousel>

          <!-- 基本信息 -->
          <el-row justify="space-between" style="margin-bottom: 10px">
            <div class="content-rating">
              <el-icon style="margin-right: 4px">
                <Star />
              </el-icon>
              {{ scenic.rating }} 分
            </div>
            <div class="content-price" style="color: #f56c6c; font-weight: bold">
              <el-icon style="margin-right: 4px">
                <Coin />
              </el-icon>
              ￥{{ scenic.price }} 起
            </div>
          </el-row>

          <!-- 标签 -->
          <el-row style="margin-bottom: 10px; flex-wrap: wrap; gap: 8px">
            <el-tag v-for="(tag, index) in scenic.tags" :key="index" type="success" size="small">
              {{ tag }}
            </el-tag>
          </el-row>

          <!-- 开放时间 & 热度 -->
          <el-row justify="space-between" style="margin-bottom: 10px; font-size: 14px; color: gray">
            <div>
              <el-icon style="margin-right: 4px">
                <Clock />
              </el-icon>
              {{ scenic.openTime }}
            </div>
            <div>
              <el-icon style="margin-right: 4px">
                <UserFilled />
              </el-icon>
              热度：{{ scenic.popularity }}
            </div>
          </el-row>

          <!-- 简介 -->
          <el-row>
            <div
              class="content-introduce"
              style="
                line-height: 1.6;
                font-size: 14px;
                color: #333;
                background-color: rgba(230, 224, 250, 0.8);
                padding: 5px;
                border-radius: 5px;
              "
            >
              {{ scenic.introduce }}
            </div>
          </el-row>

          <!-- 评论 -->
          <el-divider></el-divider>
          <div class="content-comments" style="margin-top: 20px">
            <h5 style="margin-bottom: 10px">用户评论（{{ scenic.comments?.length || 0 }}条）</h5>
            <div v-if="scenic.comments?.length">
              <div
                class="comment-box"
                v-for="(comment, index) in scenic.comments"
                :key="index"
                style="margin-bottom: 15px"
              >
                <el-row align="middle" style="margin-bottom: 5px">
                  <el-avatar :src="comment.avatar" size="small" style="margin-right: 10px" />
                  <span style="font-weight: bold">{{ comment.userName }}</span>
                </el-row>
                <el-row style="font-size: 14px; color: #444">{{ comment.content }}</el-row>
                <el-row style="font-size: 12px; color: gray">{{ comment.commentDate }}</el-row>
              </div>
            </div>
            <div v-else>
              <el-empty description="暂无评论" />
            </div>
          </div>
        </div>

        <template #footer>
          <el-button type="primary" icon="Plus">加入线路</el-button>
        </template>
      </el-card>
    </div>
    <div v-else>
      <el-empty description="请选择一个景点" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useScenicMapManageStore } from '@/stores/useScenicMapStore'
import { CloseBold } from '@element-plus/icons-vue'
import { load } from '@amap/amap-jsapi-loader'

const store = useScenicMapManageStore()

const scenic = computed(() => store.specificScenic)
const loading = computed(() => store.loading)
const showCard = computed(() => store.showCard)

const close = () => {
  store.closeCard()
}
</script>

<style scoped>
#scenic-spot-display {
  width: 100%;
  height: 100%;
  //background-color: #00c4ff;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

/* Chrome、Edge、Safari 支持 */
#scenic-spot-display::-webkit-scrollbar {
  width: 6px;
}

#scenic-spot-display::-webkit-scrollbar-track {
  background: transparent;
}

#scenic-spot-display::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
  transition: background-color 0.2s;
}

#scenic-spot-display::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

.card-header .close:hover {
  color: #f56c6c;
  transform: scale(1.1);
  transition: 0.2s;
}

.close:hover {
  color: red;
}
</style>
